<template>
	<view>
		<!-- 店铺信息 -->
		<view class="title">
			<view class="flex">
				<u-image width="152rpx" height="152rpx" border-radius="10rpx" :src="obj.logo"></u-image>
				<view class="ml20">
					<view class="name">
						{{obj.name}}
					</view>
					<view class="status">
						<text>{{obj.is_open==1?'营业中':'打烊中'}}</text>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="pt24">
					<view class="address">
						{{obj.address}}
					</view>
					<view class="distance">
						<u-icon name="map"></u-icon>
						<view class="ml10" v-if="dis!='未知距离'">
							距您直线距离{{dis}}公里
						</view>
						<view class="ml10" v-else>
							{{dis}}
						</view>
					</view>
				</view>
				<view class="flex2">
					<view class=""  @click.stop="phoneToShop(obj.tel)">
						<view class="phone">
							<u-icon color="#F0250E" name="phone-fill"></u-icon>
						</view>
						<view class="phoneText">
							电话
						</view>
					</view>
					<view class="ml30" @click.stop="guideToShop(obj)">
						<view class="phone">
							<u-icon color="#F0250E" name="map-fill"></u-icon>
						</view>
						<view class="phoneText">
							地图
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="listContent" v-for="(item,index) in newList" :key="index" @click="toGoods(item.id)">
			<u-image width="180rpx" height="180rpx" border-radius="10rpx" :src="item.pic_url"></u-image>
			<view class="right">
				<view class="details">
					{{item.name}}
				</view>
				<view class="money">
					<text class="price">￥{{item.price}}</text>
					<text class="originalPrice">￥{{item.original_price}}</text>
				</view>
				<view class="flex3">
					<view class="num">
						已售 {{item.sales}}
					</view>
					<view class="iconBg" v-if="item.product_type!=1"  @click.stop="toAddcart(item)">
						<u-icon name="plus" color="#FFF"></u-icon>
						<view class="num" v-if="item.catNum!=0">
							{{item.catNum}}
						</view>
					</view>
					<view class="nextGo" v-else>
						立即预订
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
		  newList: {
		    type: Array,
		  },
		  obj: {
		    type: Object,
		  },
		  dis:{
			type: String,
		  }
		},
		data() {
			return {
				
			};
		},
		async created() {
		
		},
		methods: {
			// 点击添加购物车
			toAddcart(e) {
			  console.log('点击了',e)
			  uni.$emit("diyAddGood1", e);
			},
			// 跳转商品
			toGoods(id) {
			  uni.navigateTo({
			    url: "/goods/goods/goods?id=" + id,
			  });
			},
			// 导航
			guideToShop(item) {
			  if (!item.latitude) return;
			  uni.openLocation({
			    latitude: parseFloat(item.latitude),
			    longitude: parseFloat(item.longitude),
			  });
			},
			// 电话
			phoneToShop(num) {
			  this.$utils.makePhoneCall(num);
			},
		},
	}
</script>

<style scoped lang="scss">
	.listContent{
		width: 702rpx;
		background: #FFFFFF;
		border-radius:10rpx;
		margin: 24rpx auto;
		padding: 16rpx;
		display: flex;
		align-items: center;
		.right{
			margin-left: 20rpx;
			width: 450rpx;
			.details{
				font-weight: 600;
				font-size: 28rpx;
				width: 450rpx;
				flex-wrap: wrap;
				color: rgba(29,29,29,0.94);
			}
			.money{
				margin-top: 13rpx;
				.price{
					font-weight: 600;
					font-size: 38rpx;
					color: #FA2C1B;
				}
				.originalPrice{
					font-weight: 400;
					font-size: 24rpx;
					color: #9B9B9B;
					text-decoration: line-through;
				}
			}
			.flex3{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.num{
					font-weight: 400;
					font-size: 24rpx;
					color: #9B9B9B;
				}
				.iconBg{
					width: 42rpx;
					height: 42rpx;
					background: #F0250E;
					border-radius: 16rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					.num{
						position: absolute;
						top: -8rpx;
						right: -8rpx;
						width: 24rpx;
						height: 24rpx;
						background: #F87F27;
						border-radius: 120rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 18rpx;
					}
				}
				.nextGo{
					background: #F0250E;
					display: flex;
					align-items: center;
					justify-content: center;
					width: 122rpx;
					border-radius: 16rpx;
					height: 42rpx;
					color: #FFF;
					font-size: 22rpx;
				}
			}
		}
	}
	.content{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.pt24{
			padding-top: 24rpx;
			.address{
				font-weight: 600;
				font-size: 24rpx;
				color: #262626;
			}
			.distance{
				font-weight: 400;
				font-size: 24rpx;
				color: #8C8C8C;
				margin-top: 5rpx;
				display: flex;
				align-items: center;
				.ml10{
					margin-left: 10rpx;
				}
			}
		}
		.flex2{
			display: flex;
			align-items: center;
			.phone{
				width: 56rpx;
				height: 56rpx;
				background: #FBECEB;
				border-radius: 120rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.phoneText{
				font-weight: 400;
				font-size: 24rpx;
				color: #F0250E;
				text-align: center;
				margin-top: 3rpx;
			}
		}
			
	}
	.title{
		width: 702rpx;
		height: 296rpx;
		background: #FFFFFF;
		border-radius:20rpx;
		margin: -240rpx auto 0rpx;
		padding: 24rpx;
		.flex{
			display: flex;
			.ml20{
				margin-left: 20rpx;
				.name{
					font-weight: 600;
					width: 460rpx;
					font-size: 40rpx;
					color: #262626;
					 white-space: nowrap;  
					 overflow: hidden;      
					 text-overflow: ellipsis;
				}
				.status{
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					margin-top: 10rpx;
				    .ml20{
						margin-left: 20rpx;
					}
				}
			}
		}
	}
	.ml30{
		margin-left: 30rpx;
	}

</style>